<!DOCTYPE html>
<html lang='pt-BR'>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Paint Ultimate</title>
<link href="css/normalize.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/paint.js"></script>

<!-- Bootstrap -->

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body onload="init()">

	<div class='container'>

		<div class="navbar navbar-default" role="navigation">
			<div class="container-fluid">
				<div class="navbar-header">
					<a class="navbar-brand" href="#">Ultimate Paint</a>
				</div>
				<div class="navbar-collapse collapse">
					<ul class="nav navbar-nav">
						<li class="tool active">
							<a href="#" onclick="selectTool('lapis')">Lápis</a>
						</li>
						<li class="tool">
							<a href="#" onclick="selectTool('linha')">Linha</a>
						</li>
						<li class="tool">
							<a href="#" onclick="selectTool('retangulo')">Retângulo</a>
						</li>
						<li class="tool">
							<a href="#" onclick="selectTool('circulo')">Círculo</a>
						</li>
						<li class="tool">
							<a href="#" onclick="selectTool('texto')">Texto</a>
						</li>
						<li class="tool">
							<a href="#" onclick="selectTool('area')">Área</a>
						</li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li>
							<a>
								<select id="lineWidth">
								    <option value="1">1</option>
								    <option value="5">2</option>
								    <option value="10">3</option>
								    <option value="20">4</option>
								    <option value="50">6</option>
								    <option value="50">10</option>
								    <option value="50">20</option>
								</select>
							</a>
						</li>
						<li>
							<a>
								<select id="fontSize">
								    <option value="8">8</option>
								    <option value="9">9</option>
								    <option value="10">10</option>
								    <option value="11">11</option>
								    <option value="12">12</option>
								    <option value="14">14</option>
								    <option value="16">16</option>
								    <option value="30">30</option>
								    <option value="60">60</option>
								</select>
							</a>
						</li>
						<li>
							<a>
								<select id="fontType">
								    <option value="Times new roman">Times new roman</option>
								    <option value="Arial">Arial</option	>
								    <option value="Arial black">Arial black</option>
								    <option value="Verdana">Verdana</option>
								</select>
							</a>
						</li>
						<li>
							<a href="#"><input type="color" id="colourBox" value="#0000FF"></a>
						</li>
						<li>
							<a href="#"><input type="color" id="colourBoxStroke" value="#000000"></a>
						</li>
						<li><a href="#" onclick="clearCanvas()">Limpar</a></li>
					</ul>
				</div>
			</div>
		</div>

		<div class='canvas-wrapper'>
			<canvas id='paintHelper' height="600" width="930"></canvas>
			<canvas id='paintWindow' height="600" width="930"></canvas>
		</div>
		
		<footer>
		
			<p class='mouse-pos'>Mouse <span id='mousePos' >X: 0   Y: 0</span></p>
			
			<p>Feito por <span class='author'><a href="#">Kevin Campos</a></span>, <span class='author'><a href="#">Luciano Lima</a></span> e <span class='author'><a href="#">Mateus Pegoraro</a></span></p>
			
		</footer>
		
	</div>

	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</body>
</html>